<template>
  <div>
    <p :style="{ opacity }">React学不会怎么办</p>
    <button @click="destroy">去学Vue吧</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      opacity: 1,
      // timer: null,
    };
  },
  methods: {
    // 完全销毁一个实例。
    //  清理它与其它实例的连接，
    // 解绑它的全部指令及事件监听器。
    destroy() {
      this.$destroy();    //destroy 摧毁销毁的意思
    },
  },
  mounted() {
    /* 生命周期函数中的this指向组件实例 */
    // 这里必须要写成箭头函数,箭头函数里面的this指向其外层函数的this,
    // 否则拿不到mounted生命周期函数中的this
    this.timer = setInterval(() => {
      this.opacity -= 0.1;
      if (this.opacity <= 0) {
        this.opacity = 1;
      }
      console.log(1);
    }, 200);
  },
  beforeDestroy() {
    clearInterval(this.timer);   
    //before 在...之前  beforeDestroy 在销毁之前清除掉定时器的意思
    //  clearInterval 清除定时器的意思
  },
};
</script>

<style>
</style>